<template>
	<comRoot @execAfterToken="loadDataGetFun">
		<template #page>
			<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/page-bg.png`" class="bg" />
			
			<comDetailNavigateBack title="领取福袋" />
			
			<view class="shop-content-list relative font-hanserif-bold">
				<scroll-view scroll-y :style="{ height: 'calc(100vh - ' + commonNavHeight + ' - 90rpx - 26rpx)' }">
					<view class="open-pack-area relative flex-direction-column flex-all-center">
						<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" 
							:src="`${commonConfigs.domainFrontFileLink}/files/images/redEnvelope/open-pack-bg.png`" 
							class="bg"
							/>
						
						<view class="user-info-box flex-direction-column flex-all-center">
							<view class="record-cover flex-all-center relative">
								<image v-if="commonConfigs && commonConfigs.domainFrontFileLink"
									:src="`${commonConfigs.domainFrontFileLink}/files/images/redEnvelope/avatar_frame.png`" 
									class="bg" style="width: 294rpx;height: 308rpx;" />
									
								<image class="record-cover-img" :src="redEnvelopeInfo.userinfo.avatar" mode=""></image>
								
								<!-- <image class="absolute" v-if="redEnvelopeInfo.userinfo.vip_cover" :src="redEnvelopeInfo.userinfo.vip_cover" mode="heightFix"
									:style="{
										'border-radius': 'unset',
										'width': 'auto',
										'top': '0rpx',
										'left': '0rpx',
										'right': 0,
										'height': '220rpx',
										'margin': 'auto',
										'z-index': 1,
									}"></image> -->
							</view>
							
							<view class="relative truncate" style="margin-bottom: 18rpx;width: 88%;text-align: center;">
								{{ redEnvelopeInfo.userinfo.nickname || 'Ta' }} 发出的福袋
							</view>
							
							<view class="relative" style="color: #FFFFFF;font-size: 36rpx;">
								{{ redEnvelopeInfo.title || '恭喜发财,大吉大利' }}
							</view>
						</view>
						
						<view v-if="redEnvelopeInfo.get_money" style="width: 100%;" class="relative flex-justify-content-center flex-align-items-baseline">
							<view class="open-pack-money relative" style="z-index: 2">
								{{ redEnvelopeInfo.get_money }}
								<text style="font-size: 36rpx;"> 旺卡币</text>
							</view>
							<view class="open-pack-money-border absolute" style="z-index: 1">
								{{ redEnvelopeInfo.get_money }}
								<text style="font-size: 36rpx;"> 旺卡币</text>
							</view>
						</view>
						
						<view class="open-pack-timeout relative flex-direction-column flex-all-center" v-else-if="redEnvelopeInfo.is_time_out">
							<view>该福袋超过24小时已过期。</view>
						</view>
						<view class="open-pack-timeout relative flex-direction-column flex-all-center" v-else-if="redEnvelopeInfo.is_open_all">
							<view>福袋已被领完。</view>
						</view>
						<view v-else-if="!redEnvelopeInfo.get_money" class="open-pack-btn relative flex-all-center">
							<image v-if="commonConfigs && commonConfigs.domainFrontFileLink"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/redEnvelope/open-pack-img.png`"
								style="width: 190rpx;height: 190rpx;"
								@click="openRedEnvelopeFun"
							/>
						</view>
						
						<view v-if="redEnvelopeInfo.is_time_out || redEnvelopeInfo.is_open_all || redEnvelopeInfo.get_money" class="send-pack-box relative flex-all-center">
							<image v-if="commonConfigs && commonConfigs.domainFrontFileLink"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/redEnvelope/send-pack-btn.png`"
								style="width: 332rpx;height: 300rpx;left: 0;right: 0;margin: auto;"
								class="bg"
							/>
							
							<view class="relative send-pack-txt flex-all-center" @click="gooSendPackPage">
								<!-- 我也发一个 -->
							</view>
						</view>
						
						<view v-if="redEnvelopeInfo.is_time_out || redEnvelopeInfo.is_open_all || redEnvelopeInfo.get_money" 
							class="record-box relative flex-all-center" 
							@click="gooRecordPage">
							查看领取记录 >
						</view>
							
					</view>
					
					<!-- 赏池推荐 -->
					<view class="flex relative flex-wrap flex-justify-content-between shop-box-list">
						<view class="goods-area-pool flex-all-center">
							<image v-if="commonConfigs && commonConfigs.domainFrontFileLink"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/redEnvelope/recommend-pool-line.png`"
								style="width: 392rpx;height: 72rpx;"
							/>
						</view>
						
						<view class="goods-area-list">
							<view class="flex-wrap flex-justify-content-between flex">
								<view class="goods-area-item relative" v-for="(item, index) in productList"
									:key="item.id" @click="gooDetailPage(item)">
									<comRewardItem :item="item" :tabPoolType="5"></comRewardItem>
								</view>
							</view>
						</view>
						
					</view>
					
				</scroll-view>
				
				<!-- 详情弹窗 -->
				<view class="maskview fixed font-hanserif-bold" v-if="confirmDialog" :zoom="true" @click="closeConfirmDialog">
					<view class="mask-info-content absolute-center" @click.stop="confirmDialog = true">
						<image class="bg" :src="`${commonConfigs.domainFrontFileLink}/files/images/redEnvelope/mask-popup-bg.png`" mode=""></image>
						
						<view style="width: 100%;top: 120rpx;" class="absolute flex-direction-column flex-all-center">
							<view class="user-info-box flex-all-center">
								<view class="record-cover flex-all-center relative">
									<image class="record-cover-img" :src="redEnvelopeInfo.userinfo.avatar" mode=""></image>
									<image class="absolute" v-if="redEnvelopeInfo.userinfo.vip_cover" :src="redEnvelopeInfo.userinfo.vip_cover" mode="heightFix"
										:style="{
											'border-radius': 'unset',
											'width': 'auto',
											'top': '-18rpx',
											'left': '-20rpx',
											'right': 0,
											'height': '110rpx',
											'margin': 'auto',
											'z-index': 1,
										}"></image>
								</view>
								
								<view class="relative truncate">
									{{ redEnvelopeInfo.userinfo.nickname }}发出的福袋
								</view>
							</view>
							
							<view class="relative truncate flex-all-center" style="width: 80%;color: #F9FF45;">
								{{ redEnvelopeInfo.title || '恭喜发财,大吉大利' }}
							</view>
						</view>
						
						<view class="relative redenvelope-num-box">
							已领取 {{ redEnvelopeInfo.open_num }}/{{ redEnvelopeInfo.num }} 个，共 {{ redEnvelopeInfo.open_money }}/{{ redEnvelopeInfo.money }} 飞机币
						</view>
						
						<scroll-view scroll-y class="info-list-content absolute" @scrolltolower="scrolltolower">
							<view v-if="redEnvelopeInfo.log && redEnvelopeInfo.log.length"  v-for="(item, index) in redEnvelopeInfo.log" :key="index" class="record-item font-hanserif-bold relative">
								<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/redEnvelope/item-bg.png`" class="bg" />
									
								<view class="relative bottom-btns flex flex-justify-content-between">
									<view class="bottom-btns-left flex-direction-column flex-justify-content-center">
										<view class="bottom-right-top" style="text-align: left;">
											{{ item.nickname }}
										</view>
										
										<view class="bottom-left-bottom">{{ item.create_time }}</view>
									</view>
									
									<view class="bottom-btns-right flex-direction-column flex-justify-content-center">
										
										<view class="flex-align-items-end flex-end">
											<view class="bottom-left-top relative" style="z-index: 2;"><text style="font-size: 38rpx;"> {{ item.get_money || '0' }}</text> 旺卡币</view>
											<view class="bottom-left-top-border absolute" style="z-index: 1;"><text style="font-size: 38rpx;"> {{ item.get_money || '0' }}</text> 旺卡币</view>
										</view>
										
										<view v-if="item.is_max" class="relative bottom-left-bottom flex-align-items-center">
											<!-- <image v-if="commonConfigs && commonConfigs.domainFrontFileLink && item.is_max === 1"
												class="ouhuang-icon" 
												:src="`${commonConfigs.domainFrontFileLink}/files/images/redEnvelope/king-icon.png`" mode=""
											></image> -->
											<view>手气最佳</view>
										</view>
										
									</view>
								</view>
							</view>
				
							<comEmptyData v-if="redEnvelopeInfo.log && !redEnvelopeInfo.log.length" />
						</scroll-view>
					
						<view class="absolute close-tips flex-all-center">
							--- 点击空白处可关闭弹框 --- 
						</view>
					</view>
				</view>
				

			</view>
		</template>
	</comRoot>
</template>

<script>
	import store from '@/store';
	import { getRedPacketPoolApi, getRedPacketDetailApi, getRedPacketDoneApi } from '@/setupproject/INTERFACE';
	import {
		setJumpFunTo,
		setNavigateFunTo
	} from '@/setupproject/TOOLS_FUN.js';
	
	export default {
		name: 'shareEnvelopePage',
		data() {
			return {
				productList: [],
				loading: true,
				
				redEnvelopeId: '',
				redEnvelopeInfo: {},
				
				confirmDialog: false,
				
				isFlag: false,
			};
		},
		computed: {
			commonNavHeight() {
				return store.getters.commonNavHeight + 'px';
			},
			commonConfigs() {
				return store.getters.commonConfigs || {};
			},
			commonOnline() {
				return this.$store.getters.commonOnline;
			},
			showLoadendTxt() {
				return this.isShowPageLoadedTxt && !this.loading && this.resLists.length ? true : false;
			},
		},
		onLoad({ id }) {
			this.redEnvelopeId = id;
			// this.loadDataGetFun();
		},
		methods: {
			// 父组件tabbar触发当前子组件事件
			async loadDataGetFun(e) {
				this.getRedPacketPoolApi();
				this.getRedPacketDetailApi();
			},
			async getRedPacketPoolApi() {
				const { data, code } = await getRedPacketPoolApi();

				if (code !== 200) {
					return;
				}
				
				this.productList = data.list;
			},
			
			async getRedPacketDetailApi() {
				const { data, code } = await getRedPacketDetailApi({ ids: this.redEnvelopeId });
			
				if (code !== 200) {
					return;
				}
				
				this.redEnvelopeInfo = data;
			},
			
			async openRedEnvelopeFun() {
				if(this.isFlag) return;
				this.isFlag = true;
				
				const {
					msg,
					code,
					data
				} = await getRedPacketDoneApi({
					ids: this.redEnvelopeId, // ids	是	string	福袋ID
				});
				
				if (code !== 200) {
					this.isFlag = false;
					return uni.showToast({
						icon: 'none',
						title: msg
					});
				}
				
				uni.showToast({
					icon: 'success',
					title: msg
				});
				
				await this.loadDataGetFun();
				this.isFlag = false;
			},
			
			gooRecordPage() {
				// uni.navigateTo({
				// 	url: `/secondary/redEnvRecordPage/redEnvRecordPage?index=0`
				// });
				
				this.confirmDialog = true;
			},
			
			// 关闭弹框
			closeConfirmDialog() {
				this.confirmDialog = false;
			},
			
			gooSendPackPage() {
				uni.navigateTo({
					url: `/secondary/redEnvelopePage/redEnvelopePage`
				});
			},

			gooDetailPage(item) {
				const params = {
					id: item.id
				};
				
				// type 等级类型: null 非新手特区的普通池, 1优惠券，2初阶，3中阶，4高阶，5特惠
				if (item.type) {
					this.isFromNewPoolBack = true;
					const params = {
						id: item.activity_id,
						fromlink: 'newerSence',
						reward_pool_show_top_cover: item.reward_pool_show_top_cover,
						remain_time: item.remain_time,
						type: item.type,
					};
					return setNavigateFunTo('secondary/specialOfferZonePage/specialOfferZonePage', params);
				}
				
				setNavigateFunTo('secondary/infinitePage/infinitePage', params);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.shop-content-list {
		padding: 0 20rpx;

		.open-pack-area {
			width: 686rpx;
			height: 704rpx;
			
			.user-info-box {
				width: 100%;
				
				font-size: 28rpx;
				color: #FFFFFF;
				
				.record-cover {
					width: 294rpx;
					height: 308rpx;
					border-radius: 100%;
					
					.record-cover-img {
						width: 132rpx;
						height: 132rpx;
						overflow: hidden;
						border-radius: 100%;
					}
				}
			}
			
			.open-pack-timeout {
				width: 100%;
				font-size: 28rpx;
				color: red;
				margin-top: 20rpx;
			}
			
			.open-pack-money {
				font-size: 90rpx;
				color: #63FFF7;
				// text-stroke: 1rpx #C06D24;
				// background: linear-gradient(to top, #FFF8AF 0%, #FFB300 100%);
				// -webkit-text-stroke: 1rpx #C06D24;
				// -webkit-background-clip: text;
				// -webkit-text-fill-color: transparent;
				margin-top: 20rpx;
			}
			
			.open-pack-money-border {
				font-size: 90rpx;
				color: transparent;
				// text-stroke: 2rpx #C06D24;
				// -webkit-text-stroke: 2rpx #C06D24;
				margin-top: 20rpx;
			}
			
			.send-pack-box {
				width: 100%;
				height: 63rpx;
				// margin-top: 20rpx;
				
				.send-pack-txt {
					width: 451rpx;
					height: 103rpx;
					font-size: 38rpx;
					color: #FFF;
					background: linear-gradient(to top, #FAFDC5 0%, #FFFFFF 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
			}
			
			.open-pack-btn {
				width: 100%;
				
				animation: openBoxSize 1.5s 0s infinite;
				-webkit-animation: openBoxSize 1.5s 0s infinite;
					
				@keyframes openBoxSize {
					0% {
						transform: scale(1);
					}
					
					50% {
						transform: scale(0.8);
					}
					
					100% {
						transform: scale(1);
					}
				}
			}
			
			.record-box {
				font-size: 28rpx;
				margin-top: 28rpx;
				font-weight: bold;
				text-decoration: underline;
				color: #FFF;
			}
			
		}

		.shop-box-list {
			padding-bottom: 20rpx;
			
			.goods-area-pool {
				width: 100%;
				margin: 30rpx 0 24rpx 0;
			}
			
			.goods-area-item {
				margin-right: 10rpx;
			}
		}
		
		.load-more-txt {
			width: 100%;
			color: #FFF;
		}
		
		// 弹框
		.maskview {
			background: rgba(0, 0, 0, 0.8);
			overflow: hidden;
			color: #fff;
			top: 0;
			left: 0;
			z-index: 10000;
			width: 100%;
			height: 100vh;
			
			.mask-info-content {
				font-size: 28rpx;
				width: 670rpx;
				height: 1088rpx;
				
				.user-info-box {
					width: 100%;
					height: 110rpx;
					font-size: 32rpx;
					color: #FFFFFF;
					
					.record-cover {
						width: 76rpx;
						height: 76rpx;
						margin-right: 28rpx;
						border-radius: 100%;
						
						.record-cover-img {
							width: 68rpx;
							height: 68rpx;
							overflow: hidden;
							border-radius: 100%;
						}
					}
				}
				
				.redenvelope-num-box {
					width: 100%;
					height: 28rpx;
					color: rgba(255, 255, 255, 1);
					top: 310rpx;
					// left: 200rpx;
					text-align: center;
				}
				
				.info-list-content {
					width: 670rpx;
					height: 740rpx;
					overflow-y: auto;
					top: 340rpx;
					left: 0;
					right: 0;
					margin: auto;
					padding: 30rpx 0;
					
					.record-item {
						color: #FFFFFF;
						font-size: 32rpx;
						// margin: auto auto 20rpx;
						margin: auto;
						padding: 0 28rpx;
						width: 606rpx;
						height: 124rpx;
				
						.title {
							margin-bottom: 8rpx;
						}
				
						.box-name {
							font-size: 30rpx;
							margin-bottom: 12rpx;
							color: #999999;
						}
				
						.bottom-btns {
							width: 100%;
							height: 100%;
				
							.bottom-btns-left {
								color: #FE7000;
								font-size: 26rpx;
							}
							
							.bottom-left-top {
								font-size: 28rpx;
								color: #63FFF7;
								// text-stroke: 1rpx #C06D24;
								// background: linear-gradient(to top, #63FFF7 0%, #63FFF7 100%);
								// -webkit-text-stroke: 1rpx #C06D24;
								// -webkit-background-clip: text;
								// -webkit-text-fill-color: transparent;
							}
							
							.bottom-left-top-border {
								font-size: 28rpx;
								color: transparent;
								// text-stroke: 2rpx #63FFF7;
								// -webkit-text-stroke: 2rpx #63FFF7;
							}
							
							.bottom-left-bottom {
								font-size: 20rpx;
								color: #FFFFFF;
								margin-top: 10rpx;
							}
				
							.bottom-btns-right {
								.btn-view {
									width: 105rpx;
									height: 32rpx;
								}
							}
							
							.bottom-right-top {
								font-size: 32rpx;
								color: #FFFFFF;
								text-align: center;
							}
							.bottom-right-bottom {
								margin-top: 10rpx;
							}
							
						}
					}
					
	
					
					.bottom-left-bottom {
						font-size: 24rpx;
						color: #FF8B1D;
					}
					
					.ouhuang-icon {
						margin-right: 10rpx;
						width: 34rpx;
						height: 26rpx;
					}
				}
				
				.close-tips {
					width: 100%;
					font-size: 24rpx;
					color: #FFFFFF;
					top: 1120rpx;
				}
				
			}
		}
		
	}
</style>
